<script lang="ts" setup>
import { reactive, ref, onActivated, onMounted, computed, defineAsyncComponent } from 'vue'
import IdForm from '@/components/form/IdForm.vue'
import { queryTimeBikeHistoryLocusTabelCol } from '@/api/bike/types/bike'
import { useTable } from '@/hooks/useTable'
import { useActivated } from '@/hooks/useActivated'
import { getToken } from '@/utils/cache/cookies'
import { useRoute } from 'vue-router'
import { queryTimeBikeHistoryLocus } from '@/api/bike'
import BikeHistoryTable from '@/components/table/BikeHistoryTable.vue'

defineOptions({
  name: 'BikeHistoryList'
})
const route = useRoute()
const form = reactive({
  bikeCode: route.query.bikeCode as string,
  phone: route.query.phone as string
})
const prevBikeCode = ref<string>(route.query.bikeCode as string)
const isSameRouteCode = computed(() => prevBikeCode.value === route.query.bikeCode)
const prevPhone = ref<string>(route.query.phone as string)
const isSameRoutePhone = computed(() => prevPhone.value === route.query.phone)
const { pagination, handleSizeChange, handleCurrentChange, data, loading, setCurrentPage, load } =
  useTable<queryTimeBikeHistoryLocusTabelCol>(
    queryTimeBikeHistoryLocus,
    getToken() ?? '',
    () => form
  )
/** 搜索 */
const handleFormSearch = () => {
  setCurrentPage(1)

  load()
}
onMounted(() => {
  load()
})
/** 处理缓存 */
onActivated(() => {
  form.bikeCode = isSameRouteCode.value ? form.bikeCode : (route.query.bikeCode as string) || ''
  form.phone = isSameRoutePhone.value ? form.phone : (route.query.phone as string) || ''
  prevBikeCode.value = route.query.bikeCode as string
  prevPhone.value = route.query.phone as string
})
useActivated(
  form,
  { form },
  [
    { key: 'startTime', path: 'form.startTime' },
    { key: 'endTime', path: 'form.endTime' },
    { key: 'bikeCode', path: 'form.bikeCode' },
    { key: 'phone', path: 'form.phone' }
  ],
  load,
  []
)

/**短租收/退费 */
const ShortBikeFeeChargedDialog = defineAsyncComponent(
  () => import('@/components/dialog/ShortBikeFeeCharged.vue')
)
const ShortBikeFeeChargedDialogRef = ref<InstanceType<typeof ShortBikeFeeChargedDialog> | null>(
  null
)
const handleOpenOperate = (row: queryTimeBikeHistoryLocusTabelCol) => {
  ShortBikeFeeChargedDialogRef.value?.setId(row.orderId, row.phone, row.startTime, row.endTime)
  ShortBikeFeeChargedDialogRef.value?.open()
}
</script>

<template>
  <div class="xy-container">
    <id-form v-model="form" @search="handleFormSearch" type="bike">
      <template #before>
        <el-form-item prop="phone" label="用户手机号">
          <el-input v-model="form.phone" placeholder="请输入用户手机号" />
        </el-form-item>
      </template>
    </id-form>
    <bike-history-table :loading="loading" :data="data" @open-operate="handleOpenOperate" />
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
    <short-bike-fee-charged-dialog ref="ShortBikeFeeChargedDialogRef" @refresh="load" />
  </div>
</template>

<style scoped></style>
